<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/bundle.js"></script>
</head>

<body>
    <pre>
        1、首先 -- 安装 webpack 模块 （ webpack 和 webpack-cli ）
        2、其次 -- 在项目根目录下 创建 webpack.config.js 的 webpack 配置文件 ， 并在文件中 moudle.exprot 导出 指定的构建模式 mode：production
                    (生产模式，代码会被压缩，编译的速度慢) 或者 development(开发模式，保留代码注释，不压缩代码，编译速度快)
        3、然后 -- 在package.json中，找到 "scripts" 属性 ，并在其中添加 "dev" : "webpack",
        4、接着 -- 使用npm run dev 来运行 webpack 模块 ，这是 webpack 就会编译我们的代码
        5、最后 -- 我们引用被 编译 过后的js文件，这是浏览器 就可以识别之前所写的代码并应用到 页面中
    </pre>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>
    <div class="box"></div>
    <div id="app"></div>
</body>

</html>